<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.17.custom.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/pmgr/css/jquery/i18n/jquery.ui.datepicker-ko.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/pmgr/css/jquery/themes/ui-lightness/jquery.ui.all.css">
<style type="text/css">
.sms_list li{
	background: url('/pmgr/images/memo_mark.jpg') no-repeat;
	float:left; 
	list-style-type:none;
	word-wrap:break-word;
	word-break:break-all; 
	display:inline-block; 
	width:120px; 
	height:100px; 
	margin: 5px; 
	padding: 24px 15px 10px 15px; }
.smsMe {height:86px;} 
.textCenter {text-align: center;}
.btm_space {margin-bottom: 10px;}
</style>
 <style type="text/css">
.party_tbl_new {
 border-top:1px solid #bbbbbb;
}
.party_tbl_new tr td {
 font-family: "굴림";
 font-size: 12px;
 color: #666666;
 text-align: center;
 border-bottom:1px solid #bbbbbb; border-left:1px solid #bbbbbb;
}
.party_tbl_new tr th {
 font-family: "굴림";
 font-size: 12px;
 color: #333333;
 font-weight: bold;
 text-align: center;
 border-bottom:1px solid #bbbbbb; border-left:1px solid #bbbbbb; background-color: #f3f3f3;
}
.border_last{
 border-right:1px solid #bbbbbb; 
}
</style>
<script type="text/javascript">
//오늘날짜
$(document).ready(function(){
	$("#msg").keyup(function(){
		if($("#msg").val().bytes()>80){
			alert('80byte를 초과할 수 없습니다');
		}
		$("#msg").val($("#msg").val().cut2(80));
		$("#textLength").html($("#msg").val().bytes());
	});
	
	var selectOption="";
	var yyyy=Number(Date.today().toString("yyyy"));
	for(var i=0;i < 3;i++){
		selectOption +="<option value='"+gofunc((yyyy+i),2)+"'>"+(yyyy+i)+"</option>";
	}
	$("#yyyy").html(selectOption);
	var nDt = new Date();
	
	$("#mm").val(nDt.toString("MM"));
	$("#dd").val(nDt.toString("dd"));
	$("#hh").val(nDt.toString("HH"));
	$("#mi").val(nDt.toString("mm"));
	getSms();
	
	$("#src_sdt, #src_edt").val(Date.today().toString("yyyy-MM-dd"));
	
});

function showCelandar(){
	$.popUrl("./perePop1200Q.do?p_id=${param.p_id}",'900','700','popOrd');
}
// 0붙이기
function gofunc(str, init){
    var cnt = init - str.length;
    var stmp = "";
    if(cnt > 0){ //원본 자릿수보다 입력하려는 자릿수가 더 클때만 적용
      for(ii=0 ; ii < cnt ; ii++){
        stmp = stmp + "0";
      }
      stmp = stmp + str;
    }else{ // 원본자릿수보다 입력하려는 자릿수가 작을때는 원본그대로 출력
      stmp = stmp = str;
    }
//     alert(stmp); // 최종 출력값
	return stmp;
}
  
function userAdd(){
	var forCnt = $("input[name='phones']").length;
	var phoneMe = $("#phone").val().replace(/-/g, '') ;
	if(""==phoneMe){
		alert("전화번호를 입력해주세요");
		return false;
	}
	for(var i=0;i < forCnt;i++){
		var phone = $($("input[name='phones']")[i]).val().replace(/-/g, ''); 
		if(phoneMe == phone){
			alert("같은 전화번호가 있습니다.");
			return false;
		}
	}
	
	var html="";
	html="<tr>"+
		"<td><input name='usrs' value='"+$("#usr").val()+"' type='hidden'>"+$("#usr").val()+"</td>"+
		"<td class=\"border_last\"><input name='phones' value='"+$("#phone").val()+"' type='hidden'>"+$("#phone").val()+"<a href='#' onclick='$(this).parent().parent().remove();'>[삭제]</a></td>"+
		"</tr>";
		
	if($("#tdUsers").find("tr").length>0){
		$('#tdUsers > tr:last').after(html);
	}else{
		$("#tdUsers").html(html);
	}
	$("#usr").val("");
	$("#phone").val("");
}

function reservation(){
// 	alert("예약");
	$("#reservation_time").show();
	$("#dateSearch").hide();
	
	$("#sendType").val("2");
	
}

//기간별로 전화조회 할 사람 불러오기
function loadUser(){
	$("#dateSearch").show();
	$("#reservation_time").hide();
}

//전송하기
function sendMsg(){
	
	if($("#tdUsers").find("input[name='usrs']").length==0){
		alert("전송할 전화번호가 없습니다");
		return false;
	}
	if(confirm("전송하시겠습니까?")){
		$("#req_msg").val($("#msg1").val());
		$("#sendPhone").val($("#sendPhoneV").val());
// 		$("#sendPhoneV").val($("#sendPhone").val());
		
		//예약일때 시간설정		
		$("#res_dt").val($("#yyyy").val()+$("#mm").val()+$("#dd").val());
		$("#res_tm").val($("#hh").val()+$("#mi").val()+"00");
		
		$("#frmData").submit();		
	}
}

function initTime(){
	var nDt = new Date();
	
	$("#yyyy").val(nDt.toString("yyyy"));
	$("#mm").val(nDt.toString("MM"));
	$("#dd").val(nDt.toString("dd"));
	$("#hh").val(nDt.toString("HH"));
	$("#mi").val(nDt.toString("mm"));
}

function cancelReservation(){
	$("#sendType").val("1");
	$("#reservation_time").hide();
}

//문자 삭제
function deleteSms(sm_no){
	if(confirm("삭제하시겠습니까?")){
		var option = {
				url: "./pere1900T.do",
				data : {"p_id":"${param.p_id }","sm_no":sm_no},
				success : function(json){
					getSms();
				}
		};
		$.getJson(option);		
	}
}

//문자저장하기
function saveSms(){
	if(""==$("#msg1").val()){
		alert("내용을 입력해주세요");
		$("#msg1").focus();
		return false;
	}
	var option = {
			url: "./pere1800T.do",
			data : {"p_id":"${param.p_id }", msg : $("#msg1").val()},
			success : function(json){
				getSms();
			}
	};
	$.getJson(option);
}

//문자 불러오기
function getSms(){
	var option = {
			url: "./pere1700Q.do",
			data : {"p_id":"${param.p_id }"},
			success : function(json){
				var html="";
				if(json!=null && json.list.length>0){
					$.each(json.list, function (i) {
						var title = "";
						if(this.title){
							title =this.title;
						}
						html+="<li><div class='smsMe'>"+this.msg.replace(/\n/g,'<br/>')+"</div>&nbsp;&nbsp;&nbsp;<a href='#' onclick=\"loadSms(this)\">[불러오기]</a><a class='textCenter' href='#' onclick=\"deleteSms('"+this.sm_no+"')\">[삭제]</a></li>";
					});
				}
				if(json.list.length<12){
					var addHtmlCnt =  12 - json.list.length ;
					for(var i=0;i<addHtmlCnt;i++){
						html+="<li><div class='smsMe'>"+"</div>&nbsp;&nbsp;&nbsp;<br>&nbsp;</li>";
					}
				}
				$(".sms_list").html(html);
			}
	};
	$.getJson(option);
}

function loadSms(me){
	$("#msg1").val($(me).parent().find(".smsMe").html().replace(/<br>/g,'\n'));
}


function loadDates(){

	if($("#src_sdt").val()==""){
		alert("예약일자를 넣어주세요");
		return false;
	}
	var d1 = Date.parse($("#src_sdt").val(),"yyyy-MM-dd");
	var d2 = Date.parse($("#src_sdt").val(),"yyyy-MM-dd");

	
	var minusDate =((d2-d1) / (24*60*60*1000))+1;
	if(minusDate>7){
		alert("8일 이상은 조회할수 없습니다");
		return false;
	}
	var option = {
		url: "./pere2000Q.do",
		data : {"p_id":"${param.p_id }","src_sdt":$("#src_sdt").val(),"src_edt":$("#src_sdt").val()},
		success : function(json){
			var html="";
			if(json!=null && json.list.length>0){
				$.each(json.list, function (i) {
					var forCnt = $("input[name='phones']").length;
					var phoneMe = this.phone.replace(/-/g, '') ;
					
					if(""!=phoneMe){
						var chkPh ="";
						for(var i=0;i < forCnt;i++){
							var phone = $($("input[name='phones']")[i]).val().replace(/-/g, ''); 
							if(phoneMe == phone){
								chkPh="N";
							}
						}
						
						if(""==chkPh){
							var html="";
							html="<tr>"+
								"<td><input name='usrs' value='"+this.reservation_nm+"' type='hidden'>"+this.reservation_nm+"</td>"+
								"<td class=\"border_last\"><input name='phones' value='"+this.phone+"' type='hidden'>"+this.phone+"<a href='#' onclick='$(this).parent().parent().remove();'>[삭제]</a></td>"+
								"</tr>";
							if($("#tdUsers").find("tr").length>0){
								$('#tdUsers > tr:last').after(html);
							}else{
								$("#tdUsers").html(html);
							}	
						}
					}
				});
			}
			$("#dateSearch").hide();
		}
	};
	$.getJson(option);
}

function saveTitle(sm_no){
	
	var option = {
		url: "./pere2300T.do",
		data : {"p_id":"${param.p_id }","title":$("#title_"+sm_no).val(),"sm_no":sm_no},
		success : function(json){
			var html="";
			if(json.cnt){
				if(json.cnt==1){
					alert("저장했습니다");
				}
			}
			
		}
	};
	$.getJson(option);
	
}

//예약발송 취소
function cancelSMS(){
	if(confirm("예약발송 취소하시겠습니까?")){
		$('#frmCancelForm').submit();	
	}
	
}
</script>

<style type="text/css">
.party_tbl_new {
 border-top:1px solid #bbbbbb;
}
.party_tbl_new tr td {
 font-family: "굴림";
 font-size: 12px;
 color: #666666;
 height: 22px;
 text-align: center;
 border-bottom:1px solid #bbbbbb; border-left:1px solid #bbbbbb;
}
.party_tbl_new tr th {
 font-family: "굴림";
 font-size: 12px;
 color: #333333;
 height: 22px;
 font-weight: bold;
 text-align: center;
 border-bottom:1px solid #bbbbbb; border-left:1px solid #bbbbbb; background-color: #f3f3f3;
}
.border_last{
 border-right:1px solid #bbbbbb; 
}
</style>
<table>
	<tr>
		<td>
			<table style="border:0; padding: 0;margin: 0;" >
				<tr>
					<td style="width: 440px;" >
						<img alt="" src="/pmgr/images/sns.jpg" />
					</td>
					<td style="width: 200px;">
						<a href="./pere1500Q.do?p_id=${param.p_id }"><img alt="" src="/pmgr/images/menu_1_over.jpg"/></a>
						<a href="./pere1501Q.do?p_id=${param.p_id }"><img alt="" src="/pmgr/images/menu_2.jpg"/></a>
					</td>
					<td style="width: 300px;text-align: right;">
						잔여문자 : <span id="smsCnt">${pensionInfo.sms_cnt }</span>건
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td style="background: url('/pmgr/images/line.jpg') no-repeat;height: 20px;"></td>
	</tr>
	<tr>
		<td>
			<table border="0">
				<tr>
					<td style="width:210px;height:500px;background: url('/pmgr/images/phone.png') no-repeat;vertical-align: top;text-align: center;">
						<textarea id="msg1" rows="" cols="" style="width:120px;height:120px; margin-top : 120px;overflow: auto; "></textarea>
						<br/><br/>
						<strong style="color: white;"><span id="textLength">0</span> / 80 byte</strong>
						<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
						<button onclick="$('#divReservation').show();">예약내역 조회</button>
					</td>
					<td style="vertical-align: top;">
					전송할전화번호 목록
						<table class="party_tbl_new" width="210px" border="1" cellspacing="0" cellpadding="0">
							<colgroup>
								<col width="60px" height="30px;">
								<col width="150px" height="30px;">
							</colgroup>
							<tbody>
							<tr>
								<th>이름</th>
								<th class="border_last">전화번호</th>
							</tr>
							</tbody>
						</table>
						<form action="./pere1600T.do" method="post" id="frmData">
						<input name="sendType" id="sendType" value="1" type="hidden" />
						<input name="sendPhone" id="sendPhone" value="1" type="hidden" />
						<input name="res_dt" id="res_dt" value="" type="hidden" />
						<input name="res_tm" id="res_tm" value="" type="hidden" />
						<input name="p_nm" id="p_nm" value="${pensionInfo.p_nm }" type="hidden" />
						<input name="p_id" id="p_id" value="${param.p_id }" type="hidden" />
						<textarea name="req_msg" id="req_msg" value="" style="display: none;"></textarea>
						
						<div style="width:210px; overflow:auto; overflow-x:hidden; height:250px; padding:0 0 17px 0;">
							<table class="party_tbl_new" width="210" cellspacing="0" cellpadding="0">
								<colgroup>
									<col width="60px">
									<col width="150px">
								</colgroup>
								<tbody id="tdUsers">
								</tbody>
							</table>
						</div>
						</form>
						
						<br/>
						<table class="party_tbl_new" width="210" cellspacing="0" cellpadding="0">
							<colgroup>
								<col width="60px" height="30px;">
								<col width="150px" height="30px;">
							</colgroup>
							<tbody>
							<tr>
								<th colspan="2" class="border_last">추가</th>
							</tr>
							<tr>
								<th>이름</th>
								<th class="border_last">전화번호</th>
							</tr>
							<tr>
								<td><input id="usr" type="text" style="width:96%" /> </td>
								<td class="border_last" style="text-align: left;"><input id="phone" type="text" style="width:60%" />
									<button onclick="userAdd();return false;">등록</button>
								</td>
							</tr>
							</tbody>
						</table>
						<br/>
						
						보낸 사람 전화번호 <input name="sendPhoneV" value="${pensionInfo.p_phone1 }-${pensionInfo.p_phone2 }-${pensionInfo.p_phone3 }" type="text" id="sendPhoneV" />
						<br/>
						<button onclick="reservation();return false;">예약선택</button>
						<button onclick="sendMsg();return false;">전송하기</button><br/>
						<button onclick="loadUser();return false;">불러오기</button>
						<button onclick="saveSms();return false;">문자저장하기</button>
						<div id="reservation_time" style="display: none;">
							예약일자 선택하기<br/>
							<select id="yyyy">
							</select>
							년
							<select id="mm">
								<c:forEach var="i" begin="1" end="12" step="1" varStatus="status">
								<option value="<fmt:formatNumber value="${i }" pattern="00"/>">${i }</option>					
								</c:forEach>
							</select>
							월
							
							<select id="dd">
								<c:forEach var="i" begin="1" end="31" step="1" varStatus="status">
								<option value="<fmt:formatNumber value="${i }" pattern="00"/>">${i }</option>					
								</c:forEach>
							</select>
							일<br/>
							<select id="hh">
								<c:forEach var="i" begin="1" end="23" step="1" varStatus="status">
								<option value="<fmt:formatNumber value="${i }" pattern="00"/>">${i }</option>					
								</c:forEach>
							</select>
							시
							<select id="mi">
								<c:forEach var="i" begin="1" end="59" step="1" varStatus="status">
								<option value="<fmt:formatNumber value="${i }" pattern="00"/>">${i }</option>					
								</c:forEach>
							</select>
							분
							<button onclick="initTime();return false;">시간 초기화</button>
							<button onclick="cancelReservation();return false;">취소</button>
							<button onclick="sendMsg();return false;">예약전송</button>
						</div>
						<div id="dateSearch" style="display: none;">
						기간별 예약자 조회<br>
							날짜<input id="src_sdt" type="text" value="" size="8" onclick="showCelandar();return false;"><br>
							<div style="display: none;"> ~ 종료일<input id="src_edt" type="text" value="" size="8"></div> 
							<a href="#" onclick="loadDates();return false;">[추가적용]</a>
							<a href="#" onclick="$('#dateSearch').hide();return false;">[닫기]</a>
						</div>
					</td>
					<td style="width:1px;background-color: #f2f2f2;">
					</td>
					<td style="vertical-align: top;">
						<div style="overflow: auto;height: 500px;">
							<ul class="sms_list">
							</ul>
						</div>
						
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>

<div id="divReservation" style="overflow: auto;height: 200px;width:820px; display: none;position: absolute;top: 100px;left: 100px;background-color: #ffffff;border:1px solid #bbbbbb">
	<table style="width: 800px;" border="1">
		<tr>
			<td><a href="#" onclick="$('#divReservation').hide();">[닫기]</a></td>
			<td>
				예약내역조회
			</td>
			<td style="text-align: right;"><a href="#" onclick="cancelSMS();">[선택예약취소]</a></td>
		</tr>
	</table>
	<form id="frmCancelForm" action="./pere1601T.do">
		<input name="p_id" value="${param.p_id}" type="hidden" />
		<table style="width: 800px;" class="party_tbl_new">
			<tr style="border: 1px solid #000000">
				<th width="50" ><input type="checkbox" onclick="chkAll();"></th>
				<th width="120" >예약일</th>
				<th width="120">발송일</th>
				<th width="">메시지내용</th>
				<th width="100">발신번호</th>
				<th width="60" class="border_last">성공여부</th>
			</tr>
			<c:if test="${smsReservationList !=null && fn:length(smsReservationList)>0 }">
			<c:forEach var="map" items="${smsReservationList}" varStatus="status">
			<tr style="border: 1px solid #FFB882;">
				<td><input type="checkbox" name="sms_reservation_nos" value="${map.sms_reservation_no }"></td>
				<c:if test="${!empty map.col }">
				<td style="text-align: center;" rowspan="${map.col }">${map.reservation_dt_n }</td>
				</c:if>
				<td style="text-align: center;">${map.reg_dt_n }</td>
				<td>${map.sms_content }</td>
				<td>${map.to_no }</td>
				<td style="text-align: center;" class="border_last">${map.c_msg }</td>
			</tr>
			</c:forEach>
			</c:if>
			<c:if test="${smsReservationList ==null || fn:length(smsReservationList)==0 }">
				<tr>
					<td colspan="5" class="border_last">예약된 자료가 없습니다</td>
				</tr>
			</c:if>
		</table>	
	</form>
</div>

